<template>
  <div>
    <div class="app-container clearfix pageHeader">
      <div class="header fl">详情</div>
      <div class="extra fr">
        <el-button @click="back">返回</el-button>
      </div>
    </div>
    <div class="app-container margin-content padding-content">
      <div class="block">
        <el-row :gutter="32">
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">集装箱号</div>
            <div class="detail">{{result.containerId}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">集装箱尺寸</div>
            <div class="detail">{{result.sizeId}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">集装箱类型</div>
            <div class="detail">{{result.type | containerTypeFilter}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">箱主代码</div>
            <div class="detail">{{result.owner}}</div>
          </el-col>
        </el-row>
        <divider></divider>
      </div>
      <div class="block">
        <el-row :gutter="32">
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">船公司编号</div>
            <div class="detail">{{result.lineCode}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">船舶编号</div>
            <div class="detail">{{result.vesselCode}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">航次编号</div>
            <div class="detail">{{result.voyageCode}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">进/出口标记</div>
            <div class="detail">{{result.ieFlag | ieFlagFilter}}</div>
          </el-col>
        </el-row>
        <divider></divider>
      </div>
      <div class="block">
        <el-row :gutter="32">
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">提单号</div>
            <div class="detail">{{result.blNo}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">重吉标记</div>
            <div class="detail">{{result.leFlag | leFlagFilter}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">扣留标记</div>
            <div class="detail">{{result.holdFlag | holdFlagFilter}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">集装箱位置</div>
            <div class="detail">{{result.location | locationFilter}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">卸货港</div>
            <div class="detail">{{result.pod}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">装货港</div>
            <div class="detail">{{result.pol}}</div>
          </el-col>
        </el-row>
        <divider></divider>
      </div>
      <div class="block">
        <el-row :gutter="32">
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">集装箱作业类型</div>
            <div class="detail">{{result.activityType | activityTypeFilter}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">集装箱作业时间</div>
            <div class="detail">{{result.activityDateDesc}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">拖车号</div>
            <div class="detail">{{result.tractorId}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">备注</div>
            <div class="detail">{{result.remark}}</div>
          </el-col>
          <!--<el-col :sm="12" :md="8" class="base-detail">-->
            <!--<div class="term">voyContStatus</div>-->
            <!--<div class="detail">{{result.voyContStatus}}</div>-->
          <!--</el-col>-->
        </el-row>
        <divider></divider>
      </div>
      <div class="block">
        <el-row :gutter="32">
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">大船公司</div>
            <div class="detail">{{result.oceanLiner}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">大船公司名称</div>
            <div class="detail">{{result.oceanLinerName}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">集装箱堆场位置/仓位</div>
            <div class="detail">{{result.yardCode}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">损毁代码</div>
            <div class="detail">{{result.damageCode}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">集装箱状态</div>
            <div class="detail">{{result.containerStatus | containerStatusFilter}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">封条号</div>
            <div class="detail">{{result.sealNo}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">船舶中文名称</div>
            <div class="detail">{{result.vesselNameCn}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">船舶英文名称</div>
            <div class="detail">{{result.vesselNameEn}}</div>
          </el-col>
          <el-col :sm="12" :md="8" class="base-detail">
            <div class="term">毛重</div>
            <div class="detail">{{result.grossWet}}</div>
          </el-col>
        </el-row>
        <divider></divider>
      </div>
    </div>
  </div>
</template>

<script>
  // api
  import {fetchDetail} from '@/api/portCont'
  // vuex
  import {mapGetters} from 'vuex'
  // components
  import Divider from '@/components/Divider'

  export default {
    name: 'port-cont-detail',
    data() {
      return {
        result: {}
      }
    },
    computed: {
      ...mapGetters([
        'currentId'
      ])
    },
    created() {
      this._fetchDetail()
    },
    methods: {
      _fetchDetail() {
        const {id, beginTime, endTime} = this.currentId
        fetchDetail({id, beginTime, endTime}).then((res) => {
          this.result = res.data.data
        })
      },
      back() {
        this.$parent.back()
      }
    },
    components: {
      Divider
    }
  }
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" type="text/scss">

</style>
